<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>WeHelp</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/localpic/103.jpg">

    <!-- CSS
    ========================= -->
    <!--bootstrap min css-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!--owl carousel min css-->
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <!--slick min css-->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!--magnific popup min css-->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!--font awesome css-->
    <link rel="stylesheet" href="assets/css/font.awesome.css">
    <!--ionicons css-->
    <link rel="stylesheet" href="assets/css/ionicons.min.css">
    <!--7 stroke icons css-->
    <link rel="stylesheet" href="assets/css/pe-icon-7-stroke.css">
    <!--animate css-->
    <link rel="stylesheet" href="assets/css/animate.css">
    <!--jquery ui min css-->
    <link rel="stylesheet" href="assets/css/jquery-ui.min.css">
    <!--plugins css-->
    <link rel="stylesheet" href="assets/css/plugins.css">

    <!-- Main Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!--modernizr min js here-->
    <script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<style>
    #pic{
        float: left;
    }
</style>
<script>
    function test(keyword,event){

        //定义全局变量
        var keyword = $("#keyword").val();
        var sel = document.getElementById("sel");
        var childs='';
        $.post(
            "/keySearch",//url
            "keyword="+ keyword,//发送的数据
             function(data){//获取响应回来的数据
                if (data == "") {
                    //把childs 这div集合放入到下拉提示框的父div中，上面我们以获取了
                    sel.innerHTML = "没有这个东西";
                    sel.style.display = "block";
                    return;
                }
                document.getElementById("sel").innerHTML="";

                var data=JSON.parse(data);

                for(var i=0;i<data.length;i++) {//循环每一个满足条件的记录
                    //将当前循环足条件的商品名称生成一个下拉的选项
                    childs += "<li onclick=Write(this) onmouseout=recoverColorwhenMouseout(this) onmouseover=changeColorwhenMouseover(this)>"
                        +data[i].productName+
                        "</li>";
                    console.log(data[i].productName);
                }

                sel.innerHTML=childs;
                //判断是否有满足条件的商品
                if(data.length>0){
                    sel.style.display='block';
                }else{
                    sel.style.display='none';
                }


                //当用户按下上下键时获取相应的值
                if(event.keyCode==40){
                    sel.focus();
                }
            },
            //发送数据类型
            "text"
        );
    }

    //鼠标悬停时改变div的颜色
    function changeColorwhenMouseover(div){
        div.style.backgroundColor="pink";
    }
    //鼠标移出时回复div颜色
    function recoverColorwhenMouseout(div){
        div.style.backgroundColor="";
    }

    //当鼠标带点击div时，将div的值赋给输入文本框
    function Write(div){
        //将div中的值赋给文本框
        document.getElementById("keyword").value=div.innerHTML;
        //让下拉提示框消失
        div.parentNode.style.display="none";
    }

    function test2(){
        //输入回车，获取输入框内容焦点
        $("#sel").keypress(function(){
            $("#keyword").focus();
            $("#sel").css("display","none");
        });
        //双击，获取输入框内容焦点
        $("#sel").dblclick(function(){
            $("#keyword").focus();
            $("#sel").css("display","none");
        });
        //将选中的下拉列表中的内容添加到输入框中
        $("#keyword").val($("option:selected").html());
    }
</script>
<body>
<!--header area start-->

<!--offcanvas menu area start-->
<div class="off_canvars_overlay">

</div>
<!--offcanvas menu area end-->

<div class="home5_bg_area" style="background-color: #f4f4f4" data-bgimg="images/background.png">
    <div class="container">
        <!--header area start-->
        <header th:fragment="header">
            <div class="main_header header_five">
                <div class="header_bottom" style="margin-top: 0px;margin-bottom: 0px">
                    <div class="header_bottom sticky-header"  style="margin-top: 0px;margin-bottom: 0px">
                    <div class="row">
                        <div class="col-lg-10 offset-lg-1" style="height: 57.67px">
                            <!--main menu start-->
                            <div class="main_menu menu_five menu_position">
                                <nav>
                                    <ul>
                                        <li><a class="active"  th:href="@{/}">首页</a>
                                        </li>
                                        <li><a th:href="@{/goods/goodInfo(pageNo=1)}">博客</a>
                                        </li>
                                        <li><a th:href="@{/info/contact-us}">联系我们</a></li>
<!--                                        <li><a th:href="@{/info/about-us}">关于我们</a></li>-->
                                        <li>
                                            <div class="header_search_box" style="padding-top: 10px">
                                            <form th:action="@{/goods/keyword}">
                                            <input type="text" placeholder="搜索您可以赠送的物品" id="keyword" name="keyword" style="width:300px;" onkeyup="test(this.value,event)">
                                            <button type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
                                            </form>
                                            </div>
                                            <ul id="sel" onchange="test2()" class="sub_menu pages"
                                                    style="width:300px;display:none">
                                            </ul>
                                        </li>
                                        <li><div class="header_wishlist" style="padding-top: 15px;margin-left: 20px">
                                            <a th:href="@{/goods/careList/}"><i class="fa fa-heart-o" aria-hidden="true"></i>
                                            </a>
                                        </div>
                                        </li>
                                        <li>
                                            <a th:href="@{/user}"  style="margin-left: 20px" class="glyphicon glyphicon-user" aria-hidden="true"></a>
                                            <ul class="sub_menu pages">
                                                <li><a th:href="@{/user}">个人中心</a></li>
                                                <li sec:authorize="!isAuthenticated()"><a th:href="@{/login.html}">登录|注册</a></li>
                                                <li sec:authorize="isAuthenticated()">
                                                    <a class="item" th:href="@{/logout}">
                                                        <i class="address card icon"></i> 注销
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                            <!--main menu end-->
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            <!--mini cart-->
            <!--mini cart end-->
        </header>
        <!--header area end-->
        <!--slider area start-->
        <section class="slider_section slider_five">
            <div class="slider_area owl-carousel">
                <div class="single_slider d-flex align-items-center" data-bgimg="assets/localpic/12.jpg">
                    <div class="row">
                        <div class="col-lg-7 col-md-7">
                            <div class="slider_content slider_c_five" style="width: 500px">
                                <h2 style="color: #0b0b0b">洒下一片阳光，播种一个希望</h2>
                                <p>留守一份真情，奉献一片爱心，让我们共同呵护那孤独的心!</p>
                                <a th:href="@{/goods/showAll}" style="background-color: #89ffc1">帮助他们</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="single_slider d-flex align-items-center" data-bgimg="assets/localpic/8.jpg">
                    <div class="row">
                        <div class="col-lg-7 col-md-7">
                            <div class="slider_content slider_c_five">
                                <h2>静静的坐着向远眺望远方的父母是否曾想起我。就像风筝的线你在那头，我在这头。思念却永不抹灭。</h2>
                                <a th:href="@{/goods/showAll}" style="background-color: #89ffc1">帮助他们</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--slider area end-->

        <!--banner area start-->
        <div class="banner_area home_banner_five" style="height: 0px;padding-top: 0px;padding-bottom: 0px">
        </div>
        <!--banner area end-->


        <!--banner area start-->
        <div class="banner_area b_box_area b_box5" style="padding-bottom: 0px">

            <div class="banner_box_container">
                <div class="row">
                    <div class="col-lg-3" th:each="good:${goods}" style="margin-top: 10px">
<!--                        <article class="single_product" style="height: 257.88px;background-color: #FFFFFF;border-radius: 2px;border: #b3b3b3">-->
<!--                            <figure>-->
<!--                                <div class="product_thumb" style="height: 181.88px">-->
<!--                                    <a class="primary_img" href="product-details.html"><img th:src="${good.getPic()}" alt="" style="height: 181.88px"></a>-->
<!--                                    <div class="label_product">-->
<!--                                        <span class="label_sale">location</span>-->
<!--                                    </div>-->
<!--                                    <div class="action_links">-->
<!--                                        <ul>-->
<!--                                            <li class="wishlist"><a th:href="@{/goods/addCare/}+${good.getId()}" title="关注"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <figcaption class="product_content">-->
<!--                                    <h4 class="product_name">[[${good.getProductName()}]]</h4>-->
<!--                                    <div class="add_to_cart">-->
<!--                                        <a th:href="@{/goods/good/}+${good.getId()}" title="详情" style="font-family: Arial">查看详情</a>-->
<!--                                    </div>-->
<!--                                </figcaption>-->
<!--                            </figure>-->
<!--                        </article>-->
                    </div>
                </div>
            </div>
        </div>
        <!--banner area end-->




        <!--footer area start-->
        <footer class="footer_widgets footer_five" th:fragment="footer" style="margin-top: 20px" >
            <div class="footer_top">
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="footer_list">
                            <div class="footer_list_title">
                                <h3>关于我们</h3>
                            </div>
                            <div class="footer_logo">
                                <a href="index.html"><img th:src="@{assets/localpic/103.jpg}" alt=""></a>
                            </div>
                            <div class="footer_desc">
                                <p>这是一个旨在帮助留守儿童的网站，在此平台上乡村教师可以直接发布信息给所有愿意帮助他们的好心人</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="footer_list">
                            <div class="footer_list_title">
                                <h3>了解更多</h3>
                            </div>
                            <div class="footer_list_menu">
                                <ul>

                                    <li><a href="#">我们其他项目</a></li>
                                    <li><a th:href="@{/toLogin}">点击一下加入我们</a></li>
                                    <li><a href="#">关注我们微博</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="footer_list">
                            <div class="footer_list_title">
                                <h3>赠送流程</h3>
                            </div>
                            <div class="footer_contact">
                                <div class="footer_contact_list">
                                    <div class="footer_contact_icon">
                                        <span>1</span>
                                    </div>
                                    <div class="footer_contact_text">
                                        <p>确认赠送</p>
                                    </div>
                                </div>
                                <div class="footer_contact_list">
                                    <div class="footer_contact_icon">
                                        <span>2</span>
                                    </div>
                                    <div class="footer_contact_text">
                                        <p>我们将会在两天之内联系您</p>
                                    </div>
                                </div>
                                <div class="footer_contact_list">
                                    <div class="footer_contact_icon">
                                        <span>3</span>
                                    </div>
                                    <div class="footer_contact_text">
                                        <p>工作人员上门取物</p>
                                    </div>
                                </div>
                                <div class="footer_contact_list">
                                    <div class="footer_contact_icon">
                                        <span>4</span>
                                    </div>
                                    <div class="footer_contact_text">
                                        <p>孩子收到礼物</p>
                                    </div>
                                </div>
                                <div class="footer_contact_list">
                                    <div class="footer_contact_icon">
                                        <span>5</span>
                                    </div>
                                    <div class="footer_contact_text">
                                        <p>教师帮孩子发送感谢邮件</p>
                                    </div>
                                </div>
                                <div class="footer_contact_list">
                                    <div class="footer_contact_icon">
                                        <span>6</span>
                                    </div>
                                    <div class="footer_contact_text">
                                        <p>完成一个心愿</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="footer_list">
                            <div class="footer_list_title">
                                <h3>联系我们</h3>
                            </div>
                            <div class="footer_contact">
                                <div class="footer_contact_list">
                                    <div class="footer_contact_icon">
                                        <span><i class="fa fa-phone"></i></span>
                                    </div>
                                    <div class="footer_contact_text">
                                        <p>电话 <a href="tel:+001666951">+001 666 951</a></p>
                                        <p>传真 <a href="tel:+001678987"> +001 678 987</a></p>
                                    </div>
                                </div>
                                <div class="footer_contact_list">
                                    <div class="footer_contact_icon">
                                        <span><i class="fa fa-mobile"></i></span>
                                    </div>
                                    <div class="footer_contact_text">
                                        <p><a href="tel:+771231234">+77 123 1234</a></p>
                                        <p><a href="tel:+42989876"> +42 98 9876</a></p>
                                    </div>
                                </div>
                                <div class="footer_contact_list">
                                    <div class="footer_contact_icon">
                                        <span><i class="fa fa-envelope"></i></span>
                                    </div>
                                    <div class="footer_contact_text">
                                        <p><a href="mailto:#">123@qq.com</a></p>
                                        <p><a href="mailto:#">456@qq.com</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer_social_newsletter">
                <div class="row">
                    <div class="col-lg-5 col-md-4">
                        <div class="footer_social">
                            <ul>
                                <li><a href="#"><i class="fa fa-facebook-square"></i></a></li>
                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fa fa-google"></i></a></li>
                                <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                <li><a href="#"><i class="fa fa-behance"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-8">
                        <div class="newsletter_area">
                            <div class="newsletter_text">
                                <h2>信息推送</h2>
                            </div>
                            <div class="subscribe_form">
                                <form id="mc-form" class="mc-form footer-newsletter" >
                                    <input id="mc-email" type="email" autocomplete="off" placeholder="输入您的邮箱" />
                                    <button id="mc-submit">订阅</button>
                                </form>
                                <!-- mailchimp-alerts Start -->
                                <div class="mailchimp-alerts text-centre">
                                    <div class="mailchimp-submitting"></div><!-- mailchimp-submitting end -->
                                    <div class="mailchimp-success"></div><!-- mailchimp-success end -->
                                    <div class="mailchimp-error"></div><!-- mailchimp-error end -->
                                </div><!-- mailchimp-alerts end -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer_bottom">
                <div class="row align-items-center">
                    <div class="col-lg-6 col-md-7">
                        <div class="copyright_area">
                            <p>Copyright &copy; 2021.dq All rights reserved.</p>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-5">

                    </div>
                </div>
            </div>
        </footer>
        <!--footer area end-->
    </div>
</div>



<!-- JS
============================================ -->
<!--jquery min js-->
<script src="assets/js/vendor/jquery-3.5.0.min.js"></script>
<!--popper min js-->
<script src="assets/js/popper.js"></script>
<!--bootstrap min js-->
<script src="assets/js/bootstrap.min.js"></script>
<!--owl carousel min js-->
<script src="assets/js/owl.carousel.min.js"></script>
<!--slick min js-->
<script src="assets/js/slick.min.js"></script>
<!--magnific popup min js-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--jquery countdown min js-->
<script src="assets/js/jquery.countdown.js"></script>
<!--jquery ui min js-->
<script src="assets/js/jquery.ui.js"></script>
<!--jquery elevatezoom min js-->
<script src="assets/js/jquery.elevatezoom.js"></script>
<!--isotope packaged min js-->
<script src="assets/js/isotope.pkgd.min.js"></script>
<!-- Plugins JS -->
<script src="assets/js/plugins.js"></script>

<!-- Main JS -->
<script src="assets/js/main.js"></script>

</body>

</html>